<template>
  <div class="dashboard-bg">
    <div class="dashboard-title-bar">
      <el-icon><i-ep-menu /></el-icon>
      <span class="dashboard-title-text">仪表盘</span>
    </div>
    <el-row :gutter="28" class="dashboard-stat-row">
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-stat-card stat-card-gradient1">
          <div class="stat-card">
            <el-icon color="#fff" size="28"><i-ep-user /></el-icon>
            <div class="stat-info">
              <div class="stat-title">总用户数</div>
              <div class="stat-value">1,234</div>
              <div class="stat-trend">
                <span class="up">↑12%</span> 较上月
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-stat-card stat-card-gradient2">
          <div class="stat-card">
            <el-icon color="#fff" size="28"><i-ep-trend-charts /></el-icon>
            <div class="stat-info">
              <div class="stat-title">活跃用户</div>
              <div class="stat-value">856</div>
              <div class="stat-trend">
                <span class="up">↑5.6%</span> 较上周
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-stat-card stat-card-gradient3">
          <div class="stat-card">
            <el-icon color="#fff" size="28"><i-ep-money /></el-icon>
            <div class="stat-info">
              <div class="stat-title">文件数量</div>
              <div class="stat-value">328</div>
              <div class="stat-trend">
                <span class="down">↓2.3%</span> 较上周
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-stat-card stat-card-gradient4">
          <div class="stat-card">
            <el-icon color="#fff" size="28"><i-ep-warning /></el-icon>
            <div class="stat-info">
              <div class="stat-title">待处理</div>
              <div class="stat-value">24</div>
              <div class="stat-trend">
                <span class="up">↑3</span> 新任务
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="28" class="dashboard-bottom-row">
      <el-col :span="12">
        <el-card class="dashboard-bottom-card dashboard-bottom-gradient1">
          <template #header>
            <span class="dashboard-bottom-title">最近活动</span>
            <el-button type="text">查看更多</el-button>
          </template>
          <el-timeline>
            <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.time">
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="dashboard-bottom-card dashboard-bottom-gradient2">
          <template #header>
            <span class="dashboard-bottom-title">任务进度</span>
          </template>
          <div class="task-list">
            <div v-for="task in tasks" :key="task.id" class="task-item">
              <div class="task-info">
                <div class="task-name">{{ task.name }}</div>
                <div class="task-desc">{{ task.desc }}</div>
              </div>
              <el-progress :percentage="task.progress" :status="task.status" :stroke-width="12" style="width: 200px;" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activities = ref([
  { time: '2023-05-01 14:32', content: '管理员添加了新用户 张三' },
  { time: '2023-05-01 12:11', content: '李四更新了系统设置' },
  { time: '2023-04-30 09:45', content: '王五创建了新角色 "财务专员"' },
  { time: '2023-04-29 16:20', content: '系统自动备份完成' },
  { time: '2023-04-28 11:05', content: '赵六修改了权限配置' }
])

const tasks = ref([
  { id: 1, name: '系统升级', desc: '升级到最新版本', progress: 80, status: 'success' },
  { id: 2, name: '数据迁移', desc: '迁移用户数据到新服务器', progress: 45, status: '' },
  { id: 3, name: '安全审计', desc: '完成系统安全审计', progress: 20, status: 'exception' },
  { id: 4, name: '性能优化', desc: '优化数据库查询性能', progress: 60, status: 'warning' }
])
</script>

<style scoped>
/* 仪表盘美化样式 */
.dashboard-bg {
  background: linear-gradient(120deg, #f6faff 0%, #e9f0fb 100%);
  border-radius: 10px;
  min-height: 900px;
  padding-bottom: 12px;
  padding-left: 12px;
  padding-right: 12px;
}

.dashboard-title-bar {
  display: flex;
  align-items: center;
  padding: 32px 0 18px 0;
  margin-bottom: 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, #e3f0ff 0%, #f8fafc 100%);
  box-shadow: 0 2px 12px rgba(0, 64, 255, 0.04);
}
.dashboard-title-bar .el-icon {
  font-size: 32px;
  color: #409EFF;
  margin-left: 32px;
}
.dashboard-title-text {
  margin-left: 16px;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #2d3a4b;
}

.dashboard-stat-card {
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(64, 158, 255, 0.08);
  color: #fff;
  min-height: 120px;
  margin-bottom: 12px;
}
.stat-card-gradient1 {
  background: linear-gradient(135deg, #409EFF 60%, #67C23A 100%);
}
.stat-card-gradient2 {
  background: linear-gradient(135deg, #67C23A 60%, #E6A23C 100%);
}
.stat-card-gradient3 {
  background: linear-gradient(135deg, #E6A23C 60%, #F56C6C 100%);
}
.stat-card-gradient4 {
  background: linear-gradient(135deg, #F56C6C 60%, #409EFF 100%);
}

.dashboard-bottom-card {
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 64, 255, 0.08);
  background: #fff;
  margin-bottom: 18px;
}
.dashboard-bottom-gradient1 {
  background: linear-gradient(120deg, #e3f0ff 0%, #f8fafc 100%);
}
.dashboard-bottom-gradient2 {
  background: linear-gradient(120deg, #f8fafc 0%, #e3f0ff 100%);
}
.dashboard-bottom-title {
  font-weight: 600;
  font-size: 18px;
  color: #2d3a4b;
}

/* 统计卡片样式 */
.stat-card {
  display: flex;
  align-items: center;
  padding: 10px 0;
}

.stat-info {
  margin-left: 16px;
}

.stat-title {
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin: 4px 0;
}

.stat-trend {
  font-size: 12px;
}

.stat-trend .up {
  color: var(--el-color-success);
}

.stat-trend .down {
  color: var(--el-color-danger);
}

/* 任务列表 */
.task-list {
  padding: 0 10px;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--el-border-color-light);
}

.task-item:last-child {
  border-bottom: none;
}

.task-info {
  flex: 1;
}

.task-name {
  font-weight: 500;
  margin-bottom: 4px;
}

.task-desc {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

/* 时间线样式调整 */
.el-timeline {
  padding-left: 10px;
}
</style> 